<template>
  <div class="s-paginator-wrapper">
    <div class="s-pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        @prev-click="preClick"
        @next-click="nextClick"
        :current-page="currentPage"
        :page-sizes="[5,10, 15, 20]"
        :page-size="size"
        :layout="layout"
        :total="total"
        :hide-on-single-page="hideOnSinglePage"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SPaginator',
  props: {
    totalRecords: { type: Number, default: 0 },  //总共多少条数据
    pageNumber: { type: Number, default: 1 },  //当前是第几页
    pageSize: { type: Number, default: 10 },  //每页显示多少条
    hideOnSinglePage: { type: Boolean, default: false },  //只有一页时不显示分页
    layout: { type: String, default: 'prev, pager, next, jumper,sizes,total' }  //显示什么功能  上一页、当前页、下一页、跳转至第几页、pageSize切换、数据总条数
  },
  data: function () {
    return {
      currentPage: 1,
      total: 0,
      size: 10
    }
  },
  watch: {
    totalRecords: {
      handler: function (val) {
        this.total = val;
      },
      immediate: true
    },
    pageNumber: {
      handler: function (val) {
        this.currentPage = val;
      },
      immediate: true
    },
    pageSize: {
      handler: function (val) {
        this.size = val;
      },
      immediate: true
    }
  },
  mounted: function () {


  },
  methods: {
    handleSizeChange(size) {
      this.size = size;
      this.currentPage = 1;
      this.$emit('size-change', { size: size, currentPage: 1 });
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      this.$emit('current-change', currentPage);
    },
    preClick(currentPage) {
      this.currentPage = currentPage;
      this.$emit('prev-click', currentPage);
    },
    nextClick(currentPage) {
      this.currentPage = currentPage;
      this.$emit('next-click', currentPage);
    }
  },
  destroyed: function () {

  }
}
</script>

<style   rel="stylesheet/scss" lang="scss" scoped>
@import "../../../assets/styles/base_style";
.s-pagination-container {
  margin-top: 20px;
  text-align: center;
}
.s-pagination-container /deep/ .el-pagination {
    .btn-prev,
    .btn-next {
      height: 30px;
      line-height: 30px;
      text-align: center;
      color: #4f4f4f;
      background: #eee;
      padding: 0;
      margin: 0;
      &:disabled {
        color: #ccc;
        background-color: #efefef;
      }
    }
    ul {
      li {
        margin: 0 5px;
        padding: 0;
        height: 30px;
        line-height: 30px;
      }
      li:not(.active) {
        color: #4f4f4f;
        background: #eee;
      }
      li.active {
        // background: $themeColor;
        color: #fff;
      }
    }
  }
.s-pagination-container /deep/ .el-pagination__jump {
    margin: 0 10px;
  }
</style>

